<template>
  <div class="money-overview">
    <div class="money-overview-top">
      <div class="account-overview">
        <h3>账户概览 <a-icon class="icon-gray" type="eye" /></h3>
        <p class="canuse-money mb20">
          <span>可用店铺余额(元) </span>
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>订单结算完成的入账金额，可用于商家日常经营收支。</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p class="money-number mb20">
          <a-statistic :precision="2" :value="shopInfo.balanceAvailable | $number2Price" >
            <template #suffix>
              <!-- 点击打开对账单明细页面 -->
              <a-icon class="icon-gray" type="right" />
            </template>
          </a-statistic>
        </p>
        <!-- <a-row class="cash-row mb20">
          <a-button disabled title="敬请期待">提现</a-button>
          <span> 可提现金额
            <a-statistic style="display:inline-block" :precision="2" :value="shopInfo.balanceCash | $number2Price" >
            </a-statistic>
          </span>
        </a-row> -->
        <p class="canuse-money mb20">
          <span>待结算金额(元) </span>
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>交易未完成的订单总额，消费者确认收货后将自动转入店铺余额。</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p class="money-number mb20">
          <a-statistic :precision="2" :value="shopInfo.balanceUnsettle | $number2Price" >
            <template #suffix>
              <!-- 点击打开店铺余额/全部交易记录页面 -->
              <a-icon class="icon-gray" type="right" />
            </template>
          </a-statistic>
        </p>
      </div>
      <div class="account-info">
        <h3 class="mb20">账户信息</h3>
        <p class="mb20">
          <span>银行卡：0 张</span>
          <!-- <a-button type="link" @click="addBankCard">去添加</a-button> -->
        </p>
        <a-list item-layout="horizontal" :data-source="cardList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-row class="card-item">
              <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
              <span>{{item.openAccountBank | $findNameInOptions(openAccountBankOptions)}}</span>
              <span>{{`(${item.cardNumber.slice(-4)})`}}</span>
            </a-row>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <div class="money-overview-bottom">
      <h3>
        <span>收支概况&nbsp;&nbsp;&nbsp;</span>
        <a-radio-group size="small" default-value="1" button-style="solid">
          <a-radio-button value="1">
            今日
          </a-radio-button>
          <a-radio-button value="2">
            昨日
          </a-radio-button>
        </a-radio-group>
      </h3>
      <a-table row-key="id" :columns="columns" :data-source="dataSource" :pagination="false">
      </a-table>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  name: 'money-overview',
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      shopInfo: {},
      cardList: [],
      openAccountBankOptions: [
        {label: '农业银行', value: 1}
      ],
      columns: [
        {title: '账户', dataIndex: 'account'},
        {title: '收入', dataIndex: 'income', customRender: (text, record)=> `+${this.number2Price(record.income)}(${record.incomeNumber}笔)`},
        {title: '支出', dataIndex: 'expenditure', customRender: (text, record)=> `-${this.number2Price(record.expenditure)}(${record.expenditureNumber}笔)`},
      ],
      dataSource: [
        {id: 1,account: '店铺余额', income: 1555, incomeNumber: 3, expenditure: 200, expenditureNumber: 1}
      ],
    }
  },
  mounted () {
    this.getShopInfo()
    this.getCardList()
  },
  methods: {
    getCardList () {
      this.$get('/bank/card/list').then(res => {
        if (res && res.returnCode === 1000) {
          this.cardList = res.dataInfo
        }
      })
    },
    getShopInfo () {
      this.$get('/shop/queryById', {id: this.userInfo.shopId}).then(res => {
        if (res && res.returnCode === 1000) {
          this.shopInfo = res.dataInfo
        }
      })
    },
    // 添加银行卡
    addBankCard () {
      this.$router.push({name: 'MoneyOverviewBankCards'})
    },
    number2Price (number) {
      number = +number || 0
      return (number / 100).toFixed(2)
    },
  }
}
</script>
<style lang="less" scoped>
  .money-overview {
    .money-overview-top {
      display: flex;
      margin-bottom: 10px;
      border-bottom: 1px solid #f0f5f8;
      .account-overview {
        flex:1;
        border-right: 1px solid #f0f5f8;
        h3 {
          margin-bottom: 10px;
        }
        .icon-gray {
          color: #999;
          font-size: 14px;
        }
        .mb20 {
          margin-bottom: 20px;
        }
      }
      .account-info {
        width: 500px;
        padding-left: 20px;
        // .card-item {
        //   // &:hover {
        //   //   .unbind {
        //   //     display: inline;
        //   //   }
        //   // }
        //   // .unbind {
        //   //   padding-left: 20px;
        //   //   display: none;
        //   // }
        // }
      }
    }
  }
</style>